<template>
  <div class="page-wrap">
    <CesiumViewer :options="viewerOptions" :camera="camera" ref="viewerRef">
      <template #entities>
        <CesiumModel
          :url="modelUrl"
          :position="position"
          :scale="scale"
          :minimumPixelSize="64"
        />
      </template>
    </CesiumViewer>
  </div>
</template>

<script setup>
import { ref, computed, watch } from "vue";
import * as Cesium from "cesium";
import CesiumViewer from "@/components/cesium/CesiumViewer.vue";
import CesiumModel from "@/components/cesium/ModelEntity.vue";

// Viewer 选项：保留常用控件，便于交互
const viewerOptions = {
  animation: false,
  baseLayerPicker: false,
  geocoder: false,
  timeline: false,
  fullscreenButton: true,
  sceneModePicker: true,
};

// 模型与视角参数
// 注意：public 下的资源以根路径提供访问，例如 public/PSFS.glb -> "/PSFS.glb"
const modelUrl = "/PSFS.glb";
const position = { lon: 121.47, lat: 31.23, height: 120 }; // 模型经纬高
const scale = 1; // 模型缩放

// 初始相机（进入页面时飞到模型附近）
const camera = {
  lon: position.lon,
  lat: position.lat,
  height: 1500,
  heading: 0,
  pitch: -35,
  roll: 0,
};

// 视图引用，便于在 viewer 就绪后再调整视角（可选）
const viewerRef = ref(null);
const viewer = computed(() => viewerRef.value?.getViewer());
watch(
  viewer,
  (v) => {
    if (!v) return;
    try {
      v.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(
          position.lon,
          position.lat,
          1200
        ),
      });
    } catch (_) {}
  },
  { immediate: true }
);
</script>

<style scoped>
.page-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
